import { Flex } from "antd";
import LoginForm from "./LoginForm";
import styled from "styled-components";
import { th } from '@/theme'

const LoginContainer = styled(Flex)`
margin: 30px auto;
width: 80%;
height: 80vh;
border-radius: 10px;
overflow: hidden;
`

const PostContainer = styled.div`
  width: 50%;
  height: 100%;
  background-color: #3e589a;
`

const FormContainer = styled(Flex)`
  width: 50%;
  height: 100%;
  background: ${props => props.bgColor};;
`

const Login = () => {
  return (
    <LoginContainer>
      <PostContainer>
      </PostContainer>
      <FormContainer justify="center" align="center" bgColor={th('loginFormBg')}>
        <LoginForm />
      </FormContainer>
    </LoginContainer>
  );
};
export default Login;